<template>
	<view class="content">
		<view class="contentList" v-if='dataList.length!=0'>
			<view class="list" v-for="(item,index) in dataList" :key ='index'>
				<view class="listTop">
					{{item.modelName}}
				</view>
				<view class="listCenter">
					<image src="../../static/jctb.png" mode=""></image>
					<view class="listCenterT">
						<view class="titles">{{item.reportName}}</view>
						<view class="titlesBottom">
							VIN：{{item.vin}}
						</view>
						<view class="titlesBottom">
							<view>时间：{{item.createTime}}</view>
							<view class="ckbg" @click="chakan(item.detectionCarReportId)">查看</view>
						</view>
					</view>
				</view>
				<view class="" style="padding: 30rpx 0;" v-if='dataList.length>=10'>
					<u-loadmore :status="status" :load-text="loadText" />
				</view>
			</view>
		</view>
		<null v-else></null>
	</view>
</template>

<script>
	import API from "@/api/my.js"
	export default {
		data() {
			return {
				searchData:{
					detectionOrderId:'',
					page:1,
					limit:20
				},
				count:0,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				dataList:[]
			}
		},
		onLoad(option) {
			if(option.detectionOrderId){
				this.searchData.detectionOrderId = option.detectionOrderId
			}
			console.log(option)
			this.detectionOrderCarReportList()
		},
		onReachBottom() {
			if(this.current == 0){
				uni.showLoading({
					title: this.status,
				});
				this.status = 'loading';
				this.searchData.page = this.searchData.page + 1;
				
					API.detectionOrderCarReportList(this.searchData).then(res => {
						this.dataList = this.dataList.concat(res.data)
						// console.log(this.dataList);
						this.count = res.count
					})
					if (this.searchData.page * this.searchData.limit >= this.count) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
			}
			
		},
		methods: {
			chakan(detectionCarReportId){
				uni.navigateTo({
					url:'/pagesB/carTestingDetails2/carTestingDetails2?detectionCarReportId='+detectionCarReportId
				})
			},
			detectionOrderCarReportList(){
				API.detectionOrderCarReportList(this.searchData).then(res=>{
					console.log(res)
					this.dataList = this.dataList.concat(res.data)
					this.count = res.count
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		margin-top: 7rpx;
	}
	.list {
		padding: 0 32rpx;
		background: #fff;
		
	}

	.listTop {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #4F4F4F;
		border-bottom: 1px solid #EFEFEF;
	}

	.listCenter {
		display: flex;
		padding: 34rpx 0 43rpx;
		border-bottom: 1px solid #EFEFEF;
		image{
			width: 95rpx;
			height: 81rpx;
		}
	}
	.listCenterT{
		margin-left: 42rpx;
		width: 600rpx;
	}
	.titles{
		font-size: 30rpx;
		font-family: PingFangSC-Medium;
		color: #2C2C2C;
		margin-bottom: 10rpx;
		
	}
	.titlesBottom{
		display: flex;
		justify-content: space-between;
		// margin-top: 12rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #4F4F4F;
	}
	.money{
		font-family: PingFangSC-Medium;
		font-size: 34rpx;
		color: #FF552E;
	}
	.fk{
		background: #002B56;
		width: 136rpx;
		height: 68rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		border-radius: 4rpx;
		margin-top: 12rpx;
		margin-left: 40rpx;
	}
	.ckbg{
		background: #FD7E6E;
		width: 136rpx;
		height: 68rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		border-radius: 4rpx;
	}
	.listBottom{
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		float: right;
		font-size: 28rpx;
	}
	.listDelBottom{
		height: 100rpx;
	}
	.jxz{
		font-size: 28rpx;
		color: #42C7E6;
		text-align: center;
	}
</style>
